<template>
    <div class="picHome">
        <el-container>
            <el-header>
                图片中心
                <el-button type="primary" @click="upload_image">上传<i class="el-icon-upload el-icon--right"></i></el-button>
            </el-header>
            
            <div v-for="index in pic_size" :key="index">
                <pic-home :pic_category="pic_categorys[index]" :pic_info="pic_hots[index]" :pic_list="pic_list[index]"></pic-home>
            </div>
        </el-container>

        <!-- 文件上传框 -->
        <el-dialog title="图片上传" :visible.sync="dialogImageVisible">
            <!-- 图片类别选项框 -->
            <div class="img_selecter0">
                <el-select
                    v-model="value"
                    filterable
                    default-first-option
                    placeholder="图片类别">
                    <el-option
                        v-for="(item,index) in options"
                        :key="index"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="openAddCategory">新增类别 <i class="el-icon-plus"></i></el-button>
            </div>

            <!-- 作品隶属老师 -->
            <div class="img_selecter1">
                <el-select
                    v-model="teacher"
                    filterable
                    default-first-option
                    placeholder="所属老师">
                    <el-option
                        v-for="(item,index) in teachers"
                        :key="index"
                        :label="item.college+' '+item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                <el-button type="success" @click="openAddTeacher">添加老师 <i class="el-icon-plus"></i></el-button>
            </div>
            
            <!-- 图片简介 -->
            <div class="img_selecter2">
                <el-input
                    type="textarea"
                    resize="none" 
                    :clearable="true"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入内容"
                    v-model="desc">
                </el-input>
            </div>
            
            <!-- 文件上传 -->
            <el-upload
                class="upload-demo"
                :action="user_image_urls[0].url+'?imgCategory='+value+'&imgAuthor='+teacher+'&imgDescribe='+desc"
                :file-list="fileList" 
                :multiple="true"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip"></div>
            </el-upload>
        </el-dialog>

        <!-- 添加老师 -->
        <el-dialog :visible.sync="dialogAddAuthorVisible">
            <el-form :inline="true" :model="author" class="demo-form-inline">
                <el-form-item label="所在学院">
                    <el-input v-model="author.college" placeholder="所在学院"></el-input>
                </el-form-item>
                <el-form-item label="教师姓名">
                    <el-input v-model="author.name" placeholder="教师姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addTeacher"><i class="el-icon-plus"></i>添加老师</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 添加类别 -->
        <el-dialog :visible.sync="dialogAddCategoryVisible">
            <el-form :inline="true" :model="category" class="demo-form-inline">
                <el-form-item label="类别名称">
                    <el-input v-model="category.name" placeholder="类别名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addCategory"><i class="el-icon-plus"></i>新增类别</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import picHome from './picHome'
import image_url from './image_url'
import user_image_url from './user_url.js'

export default {
    data(){
        return{
            pic_categorys: [],
            pic_hots: {},
            pic_size: [],
            pic_list: [[]],
            // 隶属老师信息
            teachers:[],
            teacher:[],
            // 图片类别
            options: [],
            value: [],
            // 图片的其他信息
            pic_info: {
                imgCategory: this.value,
                imgDescribe: "暂无描述！！！",
                numberOfHits: 0,
                isAudio: 0,
            },
            user_image_urls: user_image_url,

            dialogImageVisible: false,
            fileList:[],
            desc:'',
            dialogAddAuthorVisible: false,
            author: {
                college: '',
                name: '',
            },
            dialogAddCategoryVisible: false,
            category: {
                name: ''
            }

        }
    },
    methods:{
        // 添加类别
        addCategory(){
            this.$axios({
                url: user_image_url[6].url,
                params: this.category
            }).then(res => {
                if(res.data > 0){
                    this.category.name = '';
                    this.initImage();
                    this.success("新增类别成功");
                }else{
                    this.error("新增类别失败");
                }
            })
        },
        openAddCategory(){
            this.dialogAddCategoryVisible = true;
        },
        addTeacher(){
            this.$axios({
                url: user_image_url[7].url,
                params: this.author
            }).then(res => {
                if(res.data > 0){
                    this.author.college = '';
                    this.author.name = '';
                    this.getTeachers();
                    this.success("添加作者信息成功");
                }else{
                    this.error("添加作者信息失败");
                }
            })
        },
        openAddTeacher(){
            this.dialogAddAuthorVisible = true;
        },
        getTeachers(){
            this.$axios({
                url: this.user_image_urls[4].url
            }).then(res => {
                this.teachers = res.data;
                console.log(res.data);
            })
        },
        initUploadInfo(){
            this.fileList = [],
            this.desc = '';
            this.teacher = '';
            this.value = '';
        },
        upload_image(){
            this.initUploadInfo();
            this.dialogImageVisible = true;
            $(".img_selecter").stop().fadeIn(300);
            $(".upload-demo").stop().fadeIn(300);
            $(".el-select-dropdown__list li")

            if(this.options.length > 0){
                this.pic_info.imgCategory = this.options[0].value;
            }
        },
        initImage(){
            this.$axios({
                url: this.user_image_urls[1].url
            }).then(res => {
                this.pic_categorys = res.data;
                let size_arr = new Array(this.pic_categorys.length);
                let tempOptions = new Array(this.pic_categorys.length);
                for(let i=0;i<this.pic_categorys.length;i++){
                    size_arr[i] = i;
                    let obj = {
                        value: this.pic_categorys[i].id,
                        label: this.pic_categorys[i].name
                    }
                    tempOptions[i] = obj;
                }
                this.options = tempOptions;
                this.pic_size = size_arr;
                let count = 0;
                let now_hots = new Array(this.pic_categorys.length);
                this.pic_categorys.forEach((now_pic,index) => {
                    this.$axios({
                        url: this.user_image_urls[2].url,
                        params:{
                            imgCategory: now_pic.id,
                            index: 0,
                            size: 3
                        }
                    }).then(res => {
                        this.pic_list[index] = new Array(res.data.length);
                        now_hots[index] = res.data;
                        for(let i=0;i<res.data.length;i++){
                            this.pic_list[index][i] = image_url[0]+res.data[i].imgFilePath;
                        }
                        count++;
                        if(count==this.pic_categorys.length){
                            this.pic_hots = now_hots;
                        }
                    })
                });
            });
        },
        success(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'success'
            });
        },
        error(msg){
            this.$message({
                showClose: true,
                message: msg,
                type: 'error'
            });
        },
    },
    watch:{
        value(newVal,oldVal){
            this.pic_info.imgCategory = this.value;
        },
        dialogImageVisible(newVal,oldVal){
            if(newVal == false){
                this.initImage();
            }
        }
    },
    created(){
        // 获取 老师分类 信息
        this.getTeachers();
        // 请求获取数据库所以的类别信息
        this.initImage();
    },
    components:{
        picHome
    }
}
</script>

<style>
.el-header, .el-footer {
    position: relative;
    background-color: #227093;
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    text-align: center;
    line-height: 60px;
}
.el-header button{
    position: absolute;
    bottom: 5px;
    right: 20px;
}
.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.picHome .img_selecter{
    position: fixed;
    z-index: 5;
    display: none;
    top: 20%;
    left: 50%;
    margin-left: -110px;
}
element.style{
    margin-top: 2vh;
}

input[type=file]{
    display: none;
}
.picHome .img_selecter{
    display: block;
}
.img_selecter0{
    text-align: center;
    margin-top: 0px;
}
.img_selecter1{
    text-align: center;
    margin-top: 30px;
}
.img_selecter2{
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
</style>